<!--
  ~ Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
  ~
  ~ Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<div class="alert alert-success" id="saveSuccessMsgDiv" ng-bind="message" ng-show="message"/>
<div class="container-fluid">
    <div class="box row-fluid">
        <div class="box-header">
            <h2 openlmis-message="report.title.order.fill.rate"><i class="icon-edit"></i><span class="break"></span></h2>

            <div class="box-icon">
              <a id="pdf-button" ng-show="filterForm.$valid" href="" ng-click="exportReport('PDF')" class='btn-small btn-info'><span openlmis-message="label.pdf"></span></a>
              <a id="xls-button" ng-show="filterForm.$valid" href="" ng-click="exportReport('XLS')" class='btn-small btn-info'><span openlmis-message="label.excel"></span></a>
                <span ng-show="pusheditems.length>0"> <a id="mailing-button" href="#list"
                                                         ng-click="exportReport('pushed-product-list')"
                                                         class='btn-small btn-info'>Pushed ITEMS</a></span>
            </div>
        </div>
        <div>
            <div class="row-fluid">
                <div class="sidebar">
                    <div class="app-form" style="padding: 5px;">
                        <form ng-submit="filterGrid()" name="filterForm" novalidate>
                            <div filter-container class="clearfix">
                                <program-filter class="form-cell horizontalFilters" required="true"></program-filter>
                                <schedule-filter class="form-cell horizontalFilters" required="true"></schedule-filter>
                                <year-filter class="form-cell horizontalFilters" required="true"></year-filter>
                                <period-filter class="form-cell horizontalFilters" required="true"></period-filter>
                                <zone-filter class="form-cell horizontalFilters"></zone-filter>
                                <facility-type-filter class="form-cell horizontalFilters"></facility-type-filter>
                                <facility-filter class="form-cell horizontalFilters"
                                                 required="true"></facility-filter>
                                <product-category-filter
                                        class="form-cell horizontalFilters"></product-category-filter>
                                <product-multi-filter class="form-cell horizontalFilters"></product-multi-filter>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="content-body">

                    <table client-side-sort-pagination class="table table-bordered"
                           ng-show="data == undefined || data.length == 0">
                        <tr>
                            <td>No data to show under selected filters</td>
                        </tr>
                    </table>

                    <div ng-show="datarows.length>0">


                        <div ng-repeat="summary in summaries track by $index" class="pull-right">

                             <span class="report-label "> <strong>{{summary.nameLabel}}</strong></stromg></span> {{summary.facility}}
                            <span class="report-label "> <strong>{{summary.name}}</strong></span><span class="report-data">{{summary.count}}</span>


                        </div>
                        <br/>

                        <div class="pull-right legend">Page: {{tableParams.page}}, Showing records {{ ((tableParams.page
                            - 1) * tableParams.count) + 1 }} to {{ (tableParams.page ) * tableParams.count }} of
                            {{tableParams.total}}

                        </div>

                        <table ng-show="datarows.length > 0" class="table-bordered table table-striped pull-right"
                               ng-table="tableParams">
                            <tbody>
                            <tr ng-repeat="row in datarows">

                                <td data-title="'#'" class="number" style="width:20px">{{ row.no }}</td>
                                <td data-title="getLocalMessage('label.product.code')" style="width:80px" sortable="productcode">{{
                                    row.productcode }}
                                </td>
                                <td data-title="getLocalMessage('label.product.name')" style="width:30%" sortable="product">{{ row.product }}
                                </td>
                                <td data-title="getLocalMessage('header.quantity.ordered')" class="number" style="width:80px"
                                    sortable="approved">{{ row.approved | number }}
                                </td>
                                <td data-title="getLocalMessage('header.quantity.received')" class="number" style="width:80px"
                                    sortable="receipts">{{ row.receipts | number }}
                                </td>
                                <td data-title="getLocalMessage('label.item.fill.rate')" class="number" ng-class="{ red:'Item Fill Rate'}"
                                    style="width:120px" sortable="item_fill_rate">
                                    <div class="{{(row.item_fill_rate == 'Item Fill rate')?'red':(row.item_fill_rate < 50)?'red':(row.item_fill_rate > 110)?'blue':'black'}}">
                                        {{ row.item_fill_rate | number}} %
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>

        </div>

    </div>
    <div class="pull-right">
        <a ng-href="/public/pages/reports/order-fill-rate-summary/index.html#/list">Back to Order Fill Rate Summary
            Report</a>
    </div>
</div>
